<template>
	<!-- 获取当前的城市 -->
	<view @tap="SelectCity" class="mylocation">
		开始选择城市
	</view>


	<!-- 开始写四种服务 -->
	<view class="car_server">
		<view class="car_server_content" @tap="ComeToCarFix">
			<view class="car_server_icon">
				<fui-icon name="transport" size="100" color="#0055ff"
					style="margin-left:2vw;line-height: 11vh;"></fui-icon>
			</view>
			<view class="car_server_text">车辆维修</view>
		</view>
		<view class="car_server_content" @tap="ComeToCarM">
			<view class="car_server_icon">
				<fui-icon name="transport" size="100" color="#0055ff"
					style="margin-left:2vw;line-height: 11vh;"></fui-icon>
			</view>
			<view class="car_server_text">汽车保养</view>
		</view>
		<view class="car_server_content" @tap="ComeToWash">
			<view class="car_server_icon">
				<fui-icon name="transport" size="100" color="#0055ff"
					style="margin-left:2vw;line-height: 11vh;"></fui-icon>
			</view>
			<view class="car_server_text">专业洗车</view>
		</view>
		<view class="car_server_content" @tap="ComeToGas">
			<view class="car_server_icon">
				<fui-icon name="transport" size="100" color="#0055ff"
					style="margin-left:2vw;line-height: 11vh;"></fui-icon>
			</view>
			<view class="car_server_text">就近加油</view>
		</view>
	</view>


	<!-- 地图标题 -->
	<view class="map_title">
		<text style="font-size: 16px;font-weight: 800;">附近加油站</text>
		<view><text style="color:#465CFF;">全部</text><fui-icon name="roundright" size="35" color="#465CFF"></fui-icon>
		</view>
	</view>



	<!--地图-->
	<view class="map">
		<map @tap="chooseLocation" :longitude="longitude" :latitude="latitude" :markers="markers"
			style="width: 100%;height: 100%;"></map>
	</view>


	<!--团购标题 -->
	<view class="group_title">
		<text style="font-weight: 800;">优惠团购</text>
		<view><text style="color:#465CFF;" @tap="ComeToGroup">更多</text><fui-icon name="roundright" size="35"
				color="#465CFF"></fui-icon></view>
	</view>

	<!-- /* 团购 */ -->
	<view class="group">
		<view class="group_list">
			<view class="group_list_icon">
				<img @tap="ComeToGroupDetail" style="width: 100%;height: 100%;"
					src="https://i3.3conline.com/images/piclib/201003/05/batch/1/56233/1267723169949451105fdl4.jpg"
					alt="" />
			</view>
			<view class="group_list_text">
				北京四日追花拍摄秘籍——故宫
			</view>
		</view>
		<view class="group_list">
			<view class="group_list_icon">
				<img @tap="ComeToGroupDetail" style="width: 100%;height: 100%;"
					src="https://i3.3conline.com/images/piclib/201003/05/batch/1/56233/1267723169949451105fdl4.jpg"
					alt="" />
			</view>
			<view class="group_list_text">
				北京四日追花拍摄秘籍——故宫
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue';
	import "@/utils/qqmap-wx-jssdk.min.js"
	// /* // import fuiIcon from "@/components/firstui/firstui/fui-icon/fui-icon.vue" */
	import fuiIcon from "@/component/firstui/firstui/fui-icon/fui-icon.vue"
	// /* // 引入SDK核心类 */
	const QQMapWX = require('../utils/qqmap-wx-jssdk.min.js');
	// /* // 实例化API核心类 */
	var qqmapsdk = new QQMapWX({
		key: 'OEFBZ-QSF63-LPX3K-O4WZP-LGPKO-2BFZQ' // 必填
	});

	let longitude = ref("")
	let latitude = ref("")
	let markers = ref([])

	onMounted(() => {
		uni.getLocation({
			type: 'wgs84',
			success: (res) => {
				console.log("当前位置的经度:" + res.longitude)
				console.log("当前位置的维度:" + res.latitude)
				longitude.value = res.longitude
				latitude.value = res.latitude
			}
		});
		qqmapsdk.search({
			keyword: '酒店',
			success: (res) => {
				const test = [];
				for (var i = 0; i < res.data.length; i++) {
					test.push({
						title: res.data[i].title,
						id: parseInt(res.data[i].id),
						latitude: res.data[i].location.lat,
						longitude: res.data[i].location.lng,
						width: 20,
						height: 20,
					});

				};
				markers.value = test;
			}
		});

	})


	const chooseLocation = () => {
		uni.chooseLocation({
			success: (res) => {
				console.log("选择位置")
				console.log(res)
			}
		})
	}
	const ComeToGas = () => {
		console.log("ComeToGas")
		uni.navigateTo({
			url:'/pages/gas/gas'
		})
	}
const ComeToWash= () => {
		console.log("ComeToGas")
		uni.navigateTo({
			url:'/pages/carwashing/washingcar'
		})
	}
	// /* // 跳转到优惠团购的页面 */
	const ComeToGroup = () => {
		uni.navigateTo({
			url: '/pages/gyf/group_buy/group_buy'
		})
	}

	// /* // 跳转到优惠团购详情的页面 */
	const ComeToGroupDetail = () => {
		uni.navigateTo({
			url: '/pages/gyf/group_buy_detail/group_buy_detail'
		})
	}


	// /* //选择城市 */
	const SelectCity = () => {
		uni.navigateTo({
			url: '/pages/gyf/citys/citys'
		})
	}

	// /* // 跳转到车辆维修页面 */
	const ComeToCarFix = () => {
		uni.navigateTo({
			url: '/pages/gyf/car_fix/car_fix'
		})
	}
	const ComeToCarM = () => {
		uni.navigateTo({
			url: '/pages/maintenance/maintenance'
		})
	}
</script>

<style lang="scss" scoped>
	.mylocation {
		width: 100vw;
		height: 4vh;
		background-color: salmon;
		padding: 1vw 2vw;
	}


	// /* // 四种车辆服务 */
	.car_server {
		width: 100vw;
		height: 18vh;
		padding: 2vh 5vw;
		// background-color: slateblue;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.car_server_content {
			width: 20%;
			height: 100%;

			.car_server_icon {
				width: 100%;
				height: 70%;
				border-radius: 20px;
				box-shadow: 4px 5px 10px 0.1px #45d166;
			}

			.car_server_text {
				margin-top: 1vh;
				width: 100%;
				height: 22%;
				font-size: 14px;
				align-items: center;
				margin-left: 1.5vw;
			}
		}

	}


	// /* // 地图标题 */
	.map_title {
		width: 100vw;
		height: 4vh;
		padding: 0.5vh 5vw;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	// /* // 地图 */
	.map {
		width: 100vw;
		height: 30vh;
	}

	// /* //优惠团购标题 */
	.group_title {
		width: 100vw;
		height: 4vh;
		padding: 4vh 5vw;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	// /* // 团购 */
	.group {
		width: 100vw;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0px 5vw;

		.group_list {
			width: 42vw;
			height: 20vh;

			.group_list_icon {
				width: 100%;
				height: 70%;
			}

			.group_list_text {
				width: 100%;
				height: 30%;
				font-size: 14px;
			}
		}
	}
</style>